<template>
  <div class="mapv-block">
    <l-map class="leafletmap"  ref="map" :zoom="zoom" :options="mapOptions" :center="center">
      <l-marker v-for="(item,index) in pointList" :key="index" :lat-lng="item"
      :icon="getIcon(item)"
      @click="markerClick(item,index)"
      >
        <l-tooltip :content="item.name"/>
      </l-marker>
      <l-polyline v-for="(item,index) in polylineList" :key="index" :lat-lngs="getPoints(item.latlngs)" :color="item.color"></l-polyline>

      <l-marker v-for="(item,index) in circleMarkerList" :key="index" :lat-lng="item.center"
      @click="circleClick(item)"
      >
        <l-icon :icon-anchor="getAnchor(item.radius)" :class-name="getIconClass(item.color)"
        >
        <div class="headline" :style="getItemStyle(item.radius)" >{{item.name }}</div>
        </l-icon>
      </l-marker>
    </l-map>
  </div>
</template>

<script>
import { LMap,  LMarker, LIcon,LTooltip,LPolyline} from 'vue2-leaflet'
import {getCurvePoints} from "@/const/CurveUtil";
import L from 'leaflet'
export default {
  name: 'VueLeaflet.vue',
  components: {
    LMap,
    LMarker,
    LIcon,LTooltip,LPolyline,
  },
  props:{
    center:{
			type:Object,
			default:function(){
        return {lat: 29.751342, lng: 106.642792}
      }
		},
    zoom:{
			type:Number,default:5
		},
    circleMarkerList:{
      type:Array
    },
    polylineList:{
      type:Array
    },
		pointList:{
			type:Array
		},
    showMarker:{
			type:String
    },
	},
  data () {
    return {
      mapOptions: {
        zoomControl: false,
        attribution: '',
        crs: this.$CRS_CQ
      },

				icon1:L.icon({iconUrl: require("@/assets/images/ea8518.png"),}),
				icon2:L.icon({iconUrl: require("@/assets/images/d81e06.png"),}),
				icon3:L.icon({iconUrl: require("@/assets/images/f4ea2a.png"),}),
				icon4:L.icon({iconUrl: require("@/assets/images/1296df.png"),}),
				color:['#d81e06','#ec8447','#f4ea2a','#1296db'],
    }
  },
  mounted() {
    this.$addEsri(this.$refs.map.mapObject);
    this.$setMeasureStyle(this.$refs.map.mapObject);
  },
  methods:{
    getItemStyle(itemradius){
      let radius = itemradius|| 50;
      return {width: radius + 'px',height: radius + 'px',lineHeight: radius + 'px',textAlign:'center'}  
    },
    getAnchor(itemradius){
      let radius = itemradius|| 50;
      if(radius<50){
        radius=50;
      }
      return  [-50, -50];
    },

    getIconClass(color){
      return "makerStyle yellowMarker"
    },
    getPoints(fromToCenter){
      let curve = getCurvePoints(fromToCenter);
      // let curve = calcCoorArr(fromToCenter[0], fromToCenter[1],100);
      return curve;
    },
    getIcon(item){
      if(this.showMarker=='xmfxzdxm'){
        if(item.sfzdxm==1){
          return this.icon2
        }
      }
      return this.icon1;
    },

			//点击标点
			markerClick(item,index){
				let clientX=event.clientX
				let clientY=event.clientY
				this.$emit('markerClick',{item,index,clientY,clientX})
			},
      circleClick(item){
        this.$emit('circleClick',item)
      }
		},
}
</script>

<style>

.makerStyle {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;

 border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.greenMarker{
 background-color:green;
}
.yellowMarker{
   background-color: #3a4aff;
}
</style>


<style lang="scss" scoped>
	.mapv-block{
		width:100%;
		height:100%;
		position: relative;
    border:1px solid #00F9FC;
    .tipsBox{
			width:12vw;
			height:14vh;
			position: absolute;
			bottom:0;
			right:0;
			//background: rgba(0,23,94,.7);
			padding:.5vw 1vw;
			box-sizing: border-box;
			li{
				list-style: none;
				width: 100%;
				line-height: 3vh;
				color:#fff;
				font-size:12px;
				span{
					width:10px;
					height:10px;
					border-radius: 50%;
					display: inline-block;
					//background: #0000EE;
					margin-right:1vh

				}
			}
		}
	}
.leafletmap {
	height: 100%;
  width: 100%;
}
.leaflet-container {
    //background: #000a3c;地图背景颜色
}
.leaflet-container .leaflet-marker-pane img {
    margin-top: -30px !important;
    width: 30px !important;
    height: 30px !important;
}
.leaflet-control-attribution{
  display: none !important;
}
</style>

